<template>
  <el-dialog
    v-model="dialogVisible"
    title="售后操作"
    width="50%"
    :before-close="handleClose"
  >
    <div class="sales-dialog">
      <el-form inline label-width="100px">
        <el-form-item label="申请金额(元):">
          <span>
            {{ showForm?.refund_info?.refund_price }}
          </span>
        </el-form-item>
        <el-form-item label="状态:">
          <span>
            {{ showForm?.refund_status_name }}
          </span>
        </el-form-item>
        <el-form-item label="申请原因:">
          <span>
            {{ showForm?.refund_info?.refund_reason }}
          </span>
        </el-form-item>
        <el-form-item label="申请时间:">
          <span>
            {{ showForm?.refund_info?.created_at }}
          </span>
        </el-form-item>
        <div>
          <el-form-item label="申请说明:" style="width: 100%">
            <span>
              {{ showForm?.refund_info?.refund_explain }}
            </span>
          </el-form-item>
        </div>

        <el-form-item
          v-if="imgList.length > 0"
          label="申请凭证:"
          style="width: 100%"
        >
          <div class="img-box">
            <el-image
              v-for="item in imgList"
              style="width: 100px; height: 100px"
              :src="item"
              :zoom-rate="1.2"
              :preview-src-list="[item]"
              :initial-index="4"
              fit="cover"
            />
          </div>
        </el-form-item>
      </el-form>
      <!--  -->
      <el-form label-width="100px" v-if="showForm.refund_status == 3">
        <el-form-item>
          <el-button type="primary" @click="redoFun"> 发起退款 </el-button>
        </el-form-item>
      </el-form>

      <!-- 审核操作 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        v-if="showForm.refund_status == 1"
      >
        <el-form-item label="审核操作:">
          <el-radio-group v-model="ruleForm.status" @change="handleRadio">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="拒绝原因:"
          v-if="ruleForm.status === 0"
          style="width: 100%"
        >
          <el-input
            placeholder="拒绝原因"
            style="width: 100%"
            type="textarea"
            :row="2"
            v-model="ruleForm.remark"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit"> 提交 </el-button>
        </el-form-item>
      </el-form>

      <!-- 售后操作 -->
      <el-form
        ref="ruleFormRef2"
        :model="ruleForm2"
        :rules="rules"
        label-width="100px"
        v-if="showForm.refund_status == 2"
      >
        <el-form-item label="售后操作:">
          <el-radio-group v-model="ruleForm2.type" @change="changeType">
            <el-radio :label="1">退款</el-radio>
            <el-radio :label="2">发货</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="退款金额:"
          v-if="ruleForm2.type === 1"
          style="width: 100%"
          prop="refund_price"
        >
          <el-input
            placeholder="退款金额(元)"
            style="width: 200px"
            v-model="ruleForm2.refund_price"
          />
        </el-form-item>
        <el-form-item
          label="物流公司:"
          v-if="ruleForm2.type === 2"
          style="width: 100%"
          prop="company_code"
        >
          <el-select
            v-model="ruleForm2.company_code"
            filterable
            collapse-tags
            collapse-tags-tooltip
            placeholder="物流公司"
            style="width: 200px"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.code_1"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="发货单号:"
          v-if="ruleForm2.type === 2"
          style="width: 100%"
          prop="send_no"
        >
          <el-input
            placeholder="发货单号"
            style="width: 200px"
            v-model="ruleForm2.send_no"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit2"> 提交 </el-button>
        </el-form-item>
      </el-form>
      <div style="padding: 20px 10px">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in showForm?.refund_log"
            :key="index"
          >
            <div style="font-size: 12px; color: rgb(143, 142, 140)">
              {{ activity.op_username }}
            </div>
            <div style="font-size: 12px; color: rgb(143, 142, 140)">
              {{ activity.op_log }}
            </div>
            <div style="font-size: 12px; color: rgb(143, 142, 140)">
              {{ activity.created_at }}
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { listApi } from "@/plugins/api/shopping/logistics";
import { auditApi, refundApi, redoApi } from "@/plugins/api/shopping/sales";

let ruleForm = ref({});
let ruleForm2 = ref({});
let rules = {
  status: [{ required: true, message: "请选择", trigger: "change" }],
  type: [{ required: true, message: "请选择", trigger: "change" }],
  refund_price: [
    { required: true, message: "请输入退款金额", trigger: "blur" },
  ],
  company_code: [
    { required: true, message: "请选择物流公司", trigger: "change" },
  ],
  send_no: [{ required: true, message: "请输入发货单号", trigger: "blur" }],
};
let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}
let formType = ref("");
let ruleFormRef = ref(null);
let ruleFormRef2 = ref(null);
let showForm = ref({});
let imgList = ref([]);
function initFun(row) {
  // console.log(row);
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  if (ruleFormRef2.value) {
    ruleFormRef2.value.resetFields();
  }
  ruleForm.value = {};
  ruleForm2.value = {};
  showForm.value = {};
  imgList.value = [];
  showForm.value = { ...row };
  if (row.refund_info?.refund_img) {
    imgList.value = JSON.parse(row.refund_info?.refund_img);
  }
  ruleForm.value.order_no = row.order_no;
  ruleForm2.value.order_no = row.order_no;
  dialogVisible.value = true;

  getData();
}
function handleRadio(data) {
  if (data === 1) {
    ruleForm.value.remark = "";
  }
}
function changeType(data) {
  if (data === 1) {
    ruleForm2.value.company_code = "";
  } else {
    ruleForm2.value.refund_price = "";
  }
}
const emit = defineEmits(["refreshList"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      auditApi(ruleForm.value).then((data) => {
        ElMessage.success("操作成功！");
        // dialogVisible.value = false;
        emit("refreshList");
        if (ruleForm.value.status == 1) {
          showForm.value.refund_status = 2;
        } else {
          showForm.value.refund_status = -2;
        }
        showForm.value.refund_log.unshift(data);
      });
    }
  });
}
function submit2() {
  if (!ruleFormRef2.value) return;
  ruleFormRef2.value.validate((valid, fields) => {
    if (valid) {
      refundApi(ruleForm2.value).then((data) => {
        ElMessage.success("操作成功！");
        // dialogVisible.value = false;
        emit("refreshList");
        showForm.value.refund_status = 4;
        showForm.value.refund_log.unshift(data);
      });
    }
  });
}
// 物流
let options = ref([]);
function getData() {
  listApi({
    page: 1,
    pageSize: 10000,
  }).then((data) => {
    options.value = data.list;
  });
}
// 发起退款
function redoFun() {
  ElMessageBox.confirm("确认重新发起退款，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      redoApi({
        order_no: showForm.value.order_no,
      }).then((data) => {
        ElMessage({
          type: "success",
          message: "操作成功！",
        });
        showForm.value.refund_status = 4;
        showForm.value.refund_log.unshift(data);
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}

onMounted(() => {});
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.sales-dialog {
  :deep(.el-form-item) {
    width: 50%;
    margin-right: 0;
    padding-right: 10px;
    box-sizing: border-box;

    .el-input {
      width: 100%;
    }
  }

  .img-box {
    margin-bottom: 10px;

    .el-image {
      width: 100%;
      height: 140px;
      object-fit: cover;
      margin-right: 10px;
    }
  }
}
</style>
